<template>
  <view class="container">
    <view class="banner" :style="{backgroundImage: `url(${backgroundImg})`}"></view>
    <view class="title">
      <view class="left">
        <view class="shoppingName">
          {{ shop.name }}
        </view>
        <view class="discription">
          {{ shop.introduce }}
        </view>
        <view class="address">
          <image
            src="../../../static/business/address.png"
            mode="scaleToFill"
          />地址:{{ shop.address_detail }}
        </view>
      </view>
      <view class="right">
        <image
          :src="BASE_OSS_URL + shop.logo"
          mode="scaleToFill"
        />
        <image
          class="BecomeAgent"
          src="../../../static/business/BecomeAgent.png"
          mode="scaleToFill"
          @click="goToAgent"
        />
      </view>
    </view>
    <view class="list">
      <scroll-view class="nav" :show-scrollbar="false" scroll-y="true" :scroll-into-view="scrollViewId"
       scroll-with-animation>
       <view v-for="(tab, index) in menu" :key="index" :id="`nav-item_${index}`" class="nav-item"
        :class="[`nav-item_${index}`, { active: index === current }]" @click="onChange(index, $event)">
        <view>{{ tab.name }}</view>
       </view>
      </scroll-view>
      <view class="contant">
        <view class="smallTitle">{{ title }}</view>
        <scroll-view class="shop" :show-scrollbar="false" scroll-y="true" :scroll-into-view="scrollViewId"
         scroll-with-animation>
         <view class="shopItem" v-for="shop in list" :key="shop.id" @click="goodsDetail(shop.id)">
           <image
             :src="BASE_OSS_URL + shop.image"
             mode="scaleToFill"
           />
           <view class="shopInfo">
             <view class="shopName">{{ shop.name }}</view>
             <view class="shopContent">{{ shop.content }}</view>
             <view class="monthSale">月销:{{ shop.sales }}</view>
             <view class="price">¥{{ shop.price }}</view>
           </view>
           <button class="status">{{ shop.type || '抢购' }}</button>
         </view>
        </scroll-view>
      </view>
    </view>
  </view>
  <uni-popup
    ref="popup"
    type="center"
  >
    <BecomeAgent
      :id="businessId"
      @close="closeAgent"
    />
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
import { shopInfo } from '@/service/index.ts'
import { onShow, onLoad } from "@dcloudio/uni-app"
import { BASE_OSS_URL } from '@/utils/request.js'
import { BecomeAgent } from './components/BecomeAgent.vue'

const backgroundImg = ref('https://img.yzcdn.cn/vant/cat.jpeg')

const current = ref(0)
const title = ref('')

const scrollViewId = ref('')

function onChange(index, e) {
  title.value = menu.value[index].name
  list.value = menu.value[index].goods
  const nextScrollViewId = `.nav-item_${index}`
  if (current.value === index) return
  current.value = index
 }
 const list = ref([])

onLoad((options) => {
  businessId.value = options?.id
  // 获取传递过来的id并获取详情
  getDetail(options?.id)
})

// 菜单列表
const menu = ref([])
// 商家信息
const shop = ref({})

// 获取商家详情
const getDetail = (id) => {
  shopInfo({ id:id }).then(res => {
    menu.value = res.menu
    shop.value = res.shop_info
    backgroundImg.value = BASE_OSS_URL + shop.value.image
    title.value = menu.value[0].name
    list.value = menu.value[0].goods
  })
}

// 成为代理
const goToAgent = () => {
  popup.value.open()
}
// 关闭成为代理
const closeAgent = () => {
  popup.value.close()
}
// 弹窗
const popup = ref(null)

// 商家id
const businessId = ref('')

// 前往商品详情页
const goodsDetail = (id) => {
  uni.navigateTo({
    url: `/pages/business/detail/index?id=${id}`
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  .banner {
    width: 750rpx;
    height: 393rpx;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .title {
    position: absolute;
    left: 28rpx;
    top: 293rpx;
    width: 694rpx;
    height: 220rpx;
    background: #112959;
    box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0,14,41,0.3);
    border-radius: 20rpx;
    display: flex;
    .left {
      .shoppingName {
        width: 488rpx;
        height: 37rpx;
        font-weight: bold;
        font-size: 34rpx;
        color: #00C1FF;
        line-height: 30rpx;
        white-space: nowrap;
        margin-top: 39rpx;
        margin-left: 24rpx;
      }
      .discription {
        width: 320rpx;
        height: 23rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #3A75C0;
        line-height: 48rpx;
        white-space: nowrap;
        margin-top: 33rpx;
        margin-left: 30rpx;
      }
      .address {
        width: 446rpx;
        height: 23rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #3A75C0;
        line-height: 48rpx;
        white-space: nowrap;
        margin-top: 27rpx;
        margin-left: 31rpx;
      }
      image {
        width: 20rpx;
        height: 24rpx;
        margin-right: 17rpx;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      image {
        width: 99rpx;
        height: 100rpx;
        border-radius: 15rpx;
        margin-top: 38rpx;
      }
      .BecomeAgent{
        margin: 0;
        width: 110rpx;
        height: 45rpx;
        margin-top: 15rpx;
        border-radius: 0;
      }
    }
  }
  .list {
    width: 100%;
    position: absolute;
    top: 549rpx;
    display: flex;
  }
  .nav {
    width: 227rpx;
    height: calc(100vh - 549rpx);
    background: #112959;
    overflow: hidden;
 }
  .nav-item {
    width: 146rpx;
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12rpx  20rpx;
    font-size: 28rpx;

  &.active {
    background: #3A75C0;
    color: #011D42;
  }
 }
  .scroll-Y {
  height: 300rpx;
 }
  .scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
 }
 .shop {
  height: calc(100vh - 640rpx);
 }
 .contant {
   width: 100%;
   background: linear-gradient(90deg, #012148, #011434);
   .smallTitle {
    height: 26rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #00C1FF;
    line-height: 42rpx;
    margin: 28rpx 0 35rpx 30rpx;
   }
   .shopItem {
    position: relative;
    height: 190rpx;
    flex: 1;
    width: 100%;
    padding-left: 22rpx;
    margin-bottom: 40rpx;
    display: flex;
    image {
      width: 190rpx;
      height: 190rpx;
      margin-right: 20rpx;
    }
    .shopInfo {
      .shopName {
        width: 325rpx;
        height: 66rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #00C1FF;
        line-height: 40rpx;
        margin-bottom: 19rpx;
      }
      .shopContent {
        width: 306rpx;
        height: 21rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #3A75C0;
        line-height: 42rpx;
        margin-bottom: 22rpx;
        white-space: nowrap;
      }
      .monthSale {
        width: 306rpx;
        height: 21rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #3A75C0;
        line-height: 42rpx;
        margin-bottom: 17rpx;
      }
      .price {
        width: 92rpx;
        height: 23rpx;
        font-weight: 400;
        font-size: 22rpx;
        color: #F25C01;
        line-height: 42rpx;
      }
    }
    .status {
      position: absolute;
      right: 56rpx;
      bottom: 1rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #1FFFF9;
      font-weight: 500;
      width: 118rpx;
      height: 52rpx;
      background: #011738;
      border-radius: 26rpx;
      border: 2px solid;
      border-image: linear-gradient(37deg, rgba(31,255,249,0.73), rgba(43,114,180,0.73), rgba(31,255,249,0.73)) 2 2;
      white-space: nowrap;
    }
   }
 }
}
</style>